<template>
	<div class="system-flow-container">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input v-model="filterText" style="width: 15vw; margin: 5px" size="mini" placeholder="查询" />
				<el-scrollbar :style="{ 'height': screenHeight - 220 + 'px', }">
					<el-tree 
						default-expand-all
						:data="treeData"
						node-key="id"
						ref="refTree"
						@node-click="onNodeClick"
						:filter-node-method="filterNode"
						highlight-current
						:expand-on-click-node="false"
					/>
				</el-scrollbar>
			</el-col>
			<el-col :span="18">
				<el-card shadow="hover" header="流程信息" style="margin: 5px">
					<el-form :inline="false" size="medium">
						<el-form-item label-width="130px" label="审批流程">
							<el-switch v-model="audit" />
						</el-form-item>
						<el-form-item label-width="130px" label="电子签名">
							<el-switch v-model="eSign" />
						</el-form-item>
					</el-form>
				</el-card>
				<el-card shadow="hover" header="审核人员设置" style="margin: 5px">
					<div>
						<el-button type="primary" @click="ckAdd">新增</el-button>
					</div>
					<el-table
						ref="multipleTable"
						:data="rows"
						:default-sort="{ prop: 'seq' }"
						:row-style="{ height: '0' }"
						:cell-style="{ padding: '0' }"
						size="medium"
						style="width: 100%"
					>
						<el-table-column align="center" type="selection" width="55" />
						<el-table-column align="center" property="seq" sortable label="次序" show-overflow-tooltip />
						<el-table-column align="center" property="name" sortable label="名称" show-overflow-tooltip />
						<el-table-column align="center" property="nlst" sortable label="审核人员" show-overflow-tooltip />
						<el-table-column align="center" label="操作" width="150px">
							<template #default="scope">
								<el-button type="primary" @click="ckItem(scope.row, '修改', scope.$index)" plain size="mini">修改</el-button>
								<el-button type="success" @click="ckItem(scope.row, '删除', scope.$index)" plain size="mini">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
				<el-row justify="left" style="padding-left: 130px; padding-top: 50px">
					<el-button type="primary" icon="el-icon-check" @click="saveFlowDataData" size="medium">保 存</el-button>
				</el-row>
			</el-col>
		</el-row>
		<el-drawer v-model="drawerVisible" direction="rtl" size="800px" destroy-on-close>
			<addVue @refresh="refresh" ref="addvueRef" :organid="curOrganId" />
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, defineComponent, watch } from 'vue';
import { ElMessageBox, ElTable } from 'element-plus';
import { saveFlowConfig, queryFlowConfig } from '/@/api/common/index';
import addVue from '/@/views/system/flow/component/add.vue';
import { queryOrgans } from '../../../api/organ/index';

export default defineComponent({
	components: { addVue },
	setup() {
		const state = reactive({
			screenHeight: document.body.clientHeight,
			filterText: '',
			treeData: [{}],
			audit: false,
			eSign: false,
			multipleTable: ref<InstanceType<typeof ElTable>>(),
			rows: [],
			drawerVisible: false,
			curOrganId:0
		});
		const addvueRef = ref();
		async function saveFlowDataData() {
			var data = { audit: state.audit, eSign: state.eSign, auditLs: state.rows };
			if (state.audit) {
				if (state.rows.length == 0) {
					ElMessageBox({ message: '未配置审核人员', type: 'error' });
					return;
				}
			}
			await saveFlowConfig({ configJson: JSON.stringify(data),curOrganId:state.curOrganId }).then((res: any) => {
				if (res.success) {
					ElMessageBox({ message: '保存成功', type: 'success' });
				} else {
					ElMessageBox({ message: '保存失败', type: 'error' });
				}
			});
		}

		async function queryFlowConfigData(organid) {
			await queryFlowConfig({organid:organid}).then((res: any) => {
				if (res.success && res.data) {
					var data = JSON.parse(res.data);
					state.audit = data.audit;
					state.eSign = data.eSign;
					state.rows = data.auditLs || [];
				}
			});
		}
		function refresh(row: any, isNew: boolean) {
			if (isNew) {
				state.rows.push(row);
			}
			state.drawerVisible = false;
		}
		function ckAdd() {
			if(state.curOrganId == 0){
				ElMessageBox({ message: '请选择一家单位', type: 'error' });
				return;
			}
			state.drawerVisible = true;
			setTimeout(function () {
				//等待addvue组件渲染完成
				addvueRef.value.initData({}, true);
			}, 50);
		}
		function ckItem(row: any, ty: string, rowIndex: number) {
			//alert(rowIndex);
			if (ty == '修改') {
				state.drawerVisible = true;
				setTimeout(function () {
					//等待addvue组件渲染完成
					addvueRef.value.initData(row, false);
				}, 50);
			} else {
				//删除
				state.rows.splice(rowIndex, 1);
			}
		}
		function filterNode(value: String, data: any) {
			if (!value) return true;
			return data.label.includes(value);
		}
		function onNodeClick(node: any) {
			state.curOrganId = node.id;
			queryFlowConfigData(node.id || 0); 
		}
		const refTree = ref();
		queryOrgans({}).then((res: any) => {
				state.treeData = res.data.tree;
			});
		watch(
			() => state.filterText,
			(val) => {
				refTree.value.filter(val);
			}
		);
		queryFlowConfigData(0);
		return {
			addvueRef,
			...toRefs(state),
			ckItem,
			ckAdd,
			refresh,
			filterNode,
			refTree,
			onNodeClick,
			saveFlowDataData,
		};
	},
});
</script>
